<template>
    <div class="container">
        <el-menu
            :default-active="menuListActiveInfo"
            :background-color="propJson.backgroundColor"
            :text-color="propJson.textColor"
            :active-text-color="propJson.activeTextColor"
            :style="execStyle"
            :info="menuListValue"
            :info2="menuListActiveValue"
        >
            <span v-for="item in menuListInfo">
                <SubMenuListComponent v-if="item[propJson.subMenuFieldName] && item[propJson.subMenuFieldName].length > 0"
                                      :sub-menu-item="item" :sub-menu-list="item[propJson.subMenuFieldName]" :sub-menu-field="propJson.subMenuFieldName" :prop-json="propJson" :common-param="commonParam"/>
                <el-menu-item v-else :index="item.menuListIndex" @click="doMenuItemClick(item)">
                    <span>{{item.menuListTitle}}</span>
                </el-menu-item>
            </span>
        </el-menu>
    </div>
</template>

<script name="MenuListComponent" setup lang="ts">
import SubMenuListComponent from "@/components/lowcodeCommon/SubMenuListComponent.vue"
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import jsonpath from "jsonpath";
import {deepCopy} from "@/utils/ywuCommon";
import {computed, defineProps, ref} from "vue";

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let menuListInfo = ref([]);
let menuListActiveInfo = ref("");

let execStyle = computed(() => {
    let style = "";
    if (propJson.value.listHeight) {
        style += "height: " + propJson.value.listHeight + ";";
    }
    return style;
})

let menuListValue = computed(async () => {
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execThen, execCatch, null)
})

let menuListActiveValue = computed(async () => {
    await doThirdServiceValue(propJson.value.defaultActiveActionInfo, commonParam.value, execActiveThen, execActiveCatch, null)
})

function execThen(resValue) {
    if (!resValue || resValue.length <= 0) {
        menuListInfo.value = []
        return
    }
    resetMenuListInfo(resValue)
    menuListInfo.value = resValue
}

function execCatch(resValue) {

}

function doClickExecThen(execParam) {

}

function doClickExecCatch(execParam) {

}

function execActiveThen(resValue) {
    menuListActiveInfo.value = resValue
}

function execActiveCatch(resValue) {

}

function resetMenuListInfo(listInfo) {
    for (let i = 0; i < listInfo.length; i++) {
        let info = listInfo[i]
        if (info[propJson.value.subMenuFieldName] && info[propJson.value.subMenuFieldName].length > 0) {
            resetMenuListInfo(info[propJson.value.subMenuFieldName])
        }
        let indexRes = jsonpath.query(info, propJson.value.menuIndex)
        let titleRes = jsonpath.query(info, propJson.value.menuTitle)
        if (indexRes.length > 0 && titleRes.length > 0) {
            info.menuListIndex = indexRes[0]
            info.menuListTitle = titleRes[0]
        }
    }
}

async function doMenuItemClick(item) {
    // 编辑模式不触发点击事件
    if (propJson.value.editFlag) {
        return
    }
    let innerParams = propJson.value.menuClickInnerRequestVariable
    let resList = deepCopy(propJson.value.clickAction)
    // 解析item字段
    let itemInnerInfo = "";
    if (innerParams[2].variableParamName) {
        itemInnerInfo = jsonpath.query(item, innerParams[2].variableParamName)
        if (itemInnerInfo && itemInnerInfo.length > 0) {
            itemInnerInfo = itemInnerInfo[0]
        } else {
            itemInnerInfo = "";
        }
    }
    for (let i = 0; i < resList.length; i++) {
        let action = resList[i]
        if (!action.apiParamList) {
            action.apiParamList = []
        }
        if (innerParams[0].variableName) {
            let menuIndexInfo = {variableName: innerParams[0].variableName, variableValue: item.menuListIndex, type: "custom", variableType: "String", variableParamName: ""}
            action.apiParamList.push(menuIndexInfo)
        }
        if (innerParams[1].variableName) {
            let menuTitle = {variableName: innerParams[1].variableName, variableValue: item.menuListTitle, type: "custom", variableType: "String", variableParamName: ""}
            action.apiParamList.push(menuTitle)
        }
        if (innerParams[2].variableName) {
            let itemInfo = {variableName: innerParams[2].variableName, variableValue: itemInnerInfo, type: "custom", variableType: "String", variableParamName: ""}
            action.apiParamList.push(itemInfo)
        }
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(resList, awaitObj, commonParam.value, doClickExecThen, doClickExecCatch, propJson.value);
}
</script>

<style scoped lang="less">

</style>